<template>
    <view class="layout">
        <!-- 导航 -->
        <view class="navbar" :style="{backgroundColor: isFixed ? 'white' : 'transparent'}">
            <view class="statusBar" :style="{height: getStatusBarHeight() + 'px'}"></view>
            <view class="titleBar" :style="{height: getTitleBarHeight() + 'px'}">
                <view class="icon" @click="goBack">
                    <uni-icons type="back" size="28" :color="isFixed ? 'black' : '#fff'"></uni-icons>
                </view>
                <view class="title title-ellipsis" :style="{color: isFixed ? 'black' : 'transparent'}">
                    {{ novel?.novelName || '小说名称' }}
                </view>
                <view>
                    <view class="icon" style="margin-right: 20rpx;">
                        <uni-icons type="download" size="28" :color="isFixed ? 'black' : '#fff'"></uni-icons>
                    </view>
                    <view class="icon" @click="share">
                        <uni-icons type="share" size="28" :color="isFixed ? 'black' : '#fff'"></uni-icons>
                    </view>
                </view>
            </view>
        </view>
    </view>
    

    <scroll-view 
        class="content-scroll" 
        scroll-y="true" 
        show-scrollbar="false"
        @scroll="handleScroll"
    >
        <view class="status_bar">
            <view class="bg"></view>
            <view class="content" v-if="novel">
                <view class="wrap">
                    <view class="header">
                        <image :src="novel.image" mode="widthFix"></image>
                        <view class="header-content">
                            <view class="booktitle booktitle-ellipsis">{{ novel.novelName }}</view>
                            <view class="bookcontent">
                                <text>作者: {{ novel.author }}</text>
                            </view>
                            <view class="u-flex u-font-25">
                                <text>类型: {{ novel.name }}</text>
                            </view>
                            <view class="u-flex u-font-25">
                                <text>字数: {{ novel.count / 10000}}万字</text>
                            </view>
                            <view class="u-flex u-font-25">
                                <text>状态: {{ novel.status }}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        
        <!-- 悬浮盒子 -->
        <view class="box" v-if="novel">
            <view class="comment" @click="PassScore">
                    <text class="score" v-if="novel.score != 0.0">{{ novel.score }}</text>
                    <text class="score" v-else>暂无评星</text>
                    <!-- 星星 -->
                    <view class="xx">
                         <uni-rate readonly touchable allowHalf size="16" v-model="novel.score" color="#ccc" active-color="#ffca3e"/>
                    </view>
            </view>
            <view class="reading">
                <text class="rp" v-if="novel.viewCount != 0">{{ novel.viewCount }}</text>
                <text class="rs" v-if="novel.viewCount != 0">阅读人数</text>
                <text class="rs" v-else>暂无阅读</text>
            </view>
            <view class="reads">
                <text class="hr" v-if="novel.scoreCount != 0">{{ novel.scoreCount }}</text>
                <text class="hp" v-if="novel.scoreCount != 0">评分人数</text>
                <text class="hp" v-else>暂无评分</text>
            </view>
        </view>
        
        <!-- 内容部分 -->
        <view class="content" v-if="novel">
            <view class="des">
                <view class="cont-info">
                    <text>内容简介</text>
                </view>
                <text class="content-info">{{ novel.des }}</text>
            </view>
            <view class="menu" @click="watchPopu">
                <view class="me">
                    <text class="me-info">目录</text>
                    <text class="me-page" v-if="isShow">连载至{{ novel.chapterNum }}章</text>
                </view>
                <view class="watchMore">
                    <text class="more">查看更多</text>
                    <uni-icons class="icon" color="#999" type="right" size="18"></uni-icons>
                </view>
            </view>
        </view>
        <!-- 背景盒子 -->
        <view class="fulls"></view>
        <!-- 章节内容 -->
        <view class="chapter" v-if="novel">
            <view class="chapter-pages">
                <view class="p">
                    <text v-if="isShow">第一章: {{ novel.chapters[0].title }}</text>
                </view>
                <view class="chapter-content" v-if="isShow">
                    <text v-show="!showStatus" class="noshow">{{ novel.chapters[0].content }}</text>
                    <text v-show="showStatus" class="show">{{ novel.chapters[index]?.content }}</text>
                    <view class="z-bot" @click="goShow">
                        <text v-show="!showStatus">展开</text>
                        <text v-show="showStatus">收起</text>
                    </view>
                </view>
            </view>
            <!-- 版权信息 -->
            <view class="pass">
                <view class="pass-item">
                    <text>版权信息</text>
                </view>
                <view class="pass-des">
                    <text>本书的数字版权由“清风小说网”提供并授权发行，如有任何疑问，请通过"我的-意见反馈"告知我们。</text>
                </view>
            </view>
        </view>
    </scroll-view>
    
    <!-- 底部导航 -->
    <view class="nars" v-if="novel">
        <view class="img">
            <image src="../../static/novel/addbook2.png" v-show="!novel.shelf"></image>
            <text @click="addBookSelf" v-show="!novel.shelf">加入书架</text>
            <image src="../../static/novel/addbook1.png" v-show="novel.shelf"></image>
            <text @click="addBookSelf" v-show="novel.shelf" style="color: #1296db;">已加入</text>
        </view>
        <view class="btn">
            <button type="primary" @click="goReading">免费阅读</button>
        </view>
    </view>
    
    <!-- 评分栏 -->
    <view v-if="scoreVisible && novel" class="ScoreInfos">
         <view class="hs">
              <view></view>
              <text class="pu">小说评分</text>
              <text @click="cancelSocore">×</text>
          </view>
              
          <view class="content-center">
              <uni-rate v-model="score" allowHalf color="#ccc" active-color="#ffca3e"/>
              <text class="text">{{ score }}分</text>
          </view>
          <view class="footer">
              <button :disabled="isRating" @click="putScore" style="background: linear-gradient(to right, #FF8C00, #FFA500); color: white;">
                  {{ isRating ? '已评分' : '确认评分' }}
              </button>
          </view>
    </view>
    
    <!-- 目录弹出层 -->
    <view v-if="menuVisible && novel" class="popuInfos">
        <view class="he">
            <view></view>
            <text class="mu">目录</text>
            <text @click="cancel">×</text>
        </view>
                
        <view class="ce">
            <text class="pages" v-if="isShow">共{{ novel.chapterNum }}章</text>
        </view>
        <view class="unPage" style="max-height: 60vh; overflow-y: auto;">
            <view class="chapter-item" v-for="item in novel.chapters" :key="item.chapterId">
                <text>第{{ item.chapterIndex }}章</text>
                <text>{{ item.title }}</text>
            </view>
        </view>
    </view>
    
    <!-- 分享弹出层 -->
    <view v-if="shareVisible" class="shareInfo">
        <view class="shares">
            <view></view>
            <text>分享书籍</text>
            <text @click="cancle">×</text>
        </view>
        <view class="show-list" v-for="item in showData">
            <view class="items">
                <view>
                    <image :src="item.img"></image>
                </view>
                <view>
                    <text>{{ item.title }}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getStatusBarHeight, getTitleBarHeight, getNavBarHeight, getLeftIconLeft } from "@/utils/system.js";
import { ApiGetNovel ,ApiAddNovelSelf,ApiDeleteNovelSelf,ApiGetRatingScore,ApiAddRate} from "../api/novel";
// 定义一个变量来接收数据
const novel = ref({});
const isRating = ref(false)

//获取小说数据
const getNovel = async(val) =>
{
    let res =  await ApiGetNovel(val)
    novel.value = res
    isShow.value = true
    //获取评分
    getRating()
}

const score = ref(0.0)

//获取评分
const getRating = async()=>{
    let res = await ApiGetRatingScore(novel.value.novelId)
    score.value = res
    if(score.value)
    {
        isRating.value = true
    }
}

// 接收数据的函数
onLoad((options) => { 
  const bookId = options.bookId
  //获取小说数据
  getNovel(bookId)
})

// 定义一个变量用来控制渲染
const isShow = ref(false);

// 初始化其他变量
const index = ref(0);
const scoreVisible = ref(false);
const menuVisible = ref(false);
const shareVisible = ref(false);
const showStatus = ref(false);
const scrollTop = ref(0);
const isFixed = ref(false);

// 滚动事件处理
const handleScroll = (e) => {
    scrollTop.value = e.detail.scrollTop;
    isFixed.value = e.detail.scrollTop >= 150;
};

// 展开/收起内容
const goShow = () => {
    showStatus.value = !showStatus.value;
};

// 加入书架
const addBookSelf = async() => {
    if(novel.value.shelf)
    {
        novel.value.shelf = false
        await ApiDeleteNovelSelf(novel.value.novelId)
    }else{
        novel.value.shelf = true
        await ApiAddNovelSelf(novel.value.novelId)
    }
};

// 查看更多章节
const watchPopu = () => {
    if (novel.value) {
        menuVisible.value = true;
    }
};

// 取消查看章节
const cancel = () => {
    menuVisible.value = false;
};

// 评分弹窗
const PassScore = () => {
    if (novel.value && !novel.value.isRating) {
        scoreVisible.value = true;
    }
};

// 关闭评分
const cancelSocore = () => {
    scoreVisible.value = false;
};

// 确认评分
const putScore = async() => {
    //计算总分
    const total = novel.value.scoreCount * novel.value.score + score.value
    novel.value.score = total / ( novel.value.scoreCount + 1 )
    await ApiAddRate(novel.value.novelId,score.value)
    cancelSocore();
};

// 分享弹出层
const share = () => {
    shareVisible.value = true;
};

// 取消分享
const cancle = () => {
    shareVisible.value = false;
};

//跳到阅读
const goReading = () => {
    if (novel.value) {
        // 将需要传递的对象序列化为JSON字符串
        const novelData = encodeURIComponent(JSON.stringify(novel.value));
        
        uni.navigateTo({
            url: `/pages/novel/read?novelData=${novelData}`
        });
    }
};

// 返回
const goBack = () => {
    uni.navigateBack();
};

// 定义分享数据
const showData = ref([
    { img: "../../static/images/w.png", title: "微信" },
    { img: "../../static/images/p.png", title: "朋友圈" },
    { img: "../../static/images/d.png", title: "抖音" },
    { img: "../../static/images/qq.png", title: "QQ" },
]);
</script>

<style lang="scss" scoped>
// 隐藏右侧滚动条
::-webkit-scrollbar {
    display: none;
}

// 新增书名溢出隐藏样式
.title-ellipsis {
    font-size: 28rpx !important; // 减小导航栏书名大小
    white-space: nowrap; // 强制不换行
    overflow: hidden; // 溢出隐藏
    text-overflow: ellipsis; // 显示省略号
    max-width: 60%; // 限制最大宽度
    margin: 0 20rpx; // 增加左右间距
}

// 新增头部区域书名样式
.booktitle-ellipsis {
    font-size: 34rpx !important; // 适当减小头部书名大小
    white-space: nowrap; // 强制不换行
    overflow: hidden; // 溢出隐藏
    text-overflow: ellipsis; // 显示省略号
    max-width: 80%; // 限制最大宽度
}

.layout {
    .navbar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 10;
        background-color: transparent;
        transition: background-color 0.3s ease;

        .titleBar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 30rpx;
            height: 88rpx;
            transition: background-color 0.3s ease;

            .icon {
                transition: color 0.3s ease;
            }

            .title {
                font-size: 32rpx;
                font-weight: bold;
                flex: 1;
                text-align: center;
                transition: color 0.3s ease;
            }
        }
    }
}

// 用scroll-view包裹的区域
.content-scroll {
    height: calc(100vh - 60px); // 减去底部导航的高度
    overflow: hidden;
}

// 头部区域
.status_bar {
    height: calc(var(--status-bar-height) + 200px);
    width: 100%;
    overflow: hidden;

    .bg {
        width: 100%;
        height: 100%;
        background: linear-gradient(to right, #beecd8 20%, #F4E2D8);
    }

    .content {
        position: absolute;
        top: 0;
    }
}

// 内容包裹层
.wrap {
    padding: 18rpx;
}

// 书籍信息头部
.header {
    display: flex;
    height: auto;
    font-size: 32rpx;
    color: #FFFFFF;
    padding: 0rpx 35rpx;

    .header-content {
        display: flex;
        flex-direction: column;
        margin-left: 30rpx;

        .booktitle {
            font-family: sans-serif;
            font-size: 38rpx;
            font-weight: bold;
        }

        .bookcontent {
            font-size: 28rpx;
            margin-top: 10rpx;
        }
    }
}

// 书籍封面图片
.header image {
    width: 180rpx;
    height: 240rpx;
    border-radius: 8rpx;
    margin-left: 15rpx;
}

// 悬浮盒子
.box {
    height: 160rpx;
    margin-left: 30rpx;
    margin-right: 30rpx;
    margin-top: -30rpx;
    border: 1px solid #eee;
    border-radius: 10px;
    z-index: 10;
    box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.25);
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .comment {
        display: flex;
        flex-direction: column;
        align-items: center;

        .score {
            font-size: 18px;
            font-weight: bold;
        }
    }

    .reading {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        .rp {
            font-size: 18px;
            font-weight: bold;
        }

        .rs {
            color: #999;
            font-size: 13px;
        }
    }

    .reads {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        .hr {
            font-size: 18px;
            font-weight: bold;
        }

        .hp {
            color: #999;
            font-size: 13px;
        }
    }
}

// 内容部分
.content {
    padding: 30rpx;

    .des {
        .cont-info {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            font-weight: 600;
            padding-bottom: 10rpx;
        }

        .content-info {
            color: #999;
            text-indent: 2em;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
            overflow: hidden;
        }
    }

    .menu {
        margin-top: 20rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .me {
            .me-info {
                font-size: 16px;
                font-weight: 600;
                margin-right: 10rpx;
            }

            .me-page {
                color: #999;
                font-size: 13px;
            }
        }

        .watchMore {
            .more {
                color: #999;
                font-size: 15px;
            }
        }
    }
}

// 背景盒子
.fulls {
    width: 100%;
    height: 30rpx;
    background-color: #eee;
}

// 章节内容
.chapter {
    width: 100%;
    height: auto;
    padding-bottom: 140rpx; // 调整了底部的padding

    .chapter-pages {
        padding: 15rpx 30rpx;

        .p {
            font-size: 16px;
            font-weight: bold;
        }

        .chapter-content {
            padding-top: 15rpx;
            text-indent: 2em;

            .noshow {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                overflow: hidden;
            }

            .show {
                // 完整显示内容
            }

            .z-bot {
                width: 100%;
                margin: 10rpx -10rpx;

                text {
                    float: right;
                }
            }
        }
    }

    // 版权信息
    .pass {
        margin-top: 20rpx;
        margin-bottom: 25px;

        .pass-item {
            font-size: 16px;
            font-weight: bold;
            margin-left: 30rpx;
            margin-right: 30rpx;
        }

        .pass-des {
            color: #999;
            font-size: 14px;
            margin-left: 30rpx;
            margin-right: 30rpx;
            padding-top: 10rpx;
        }
    }
}

// 底部导航
.nars {
    width: 100%;
    height: 60px;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 10rpx 10rpx 0 0; // 调整了圆角，使顶部更接近内容区域
    box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.05);
    padding: 10rpx 30rpx;

    .img {
        display: flex;
        align-items: center;

        image {
            width: 50rpx;
            height: 50rpx;
            margin-right: 15rpx;
        }
    }

    .btn {
        padding-right: 20px;
        button {
            width: 300rpx;
            background-image: linear-gradient(45deg, #FF8C00, #FFA500);
            border-radius: 30px;
            color: white;
            border: none;
        }
    }
}

// 评分栏
.ScoreInfos {
    background: #ffffff;
    padding: 30rpx;
    border-radius: 30rpx;
    width: 70vw;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;

    .hs {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 20rpx;

        .pu {
            font-size: 16px;
            font-weight: 600;
        }
    }

    .content-center {
        padding: 30rpx 0;
        display: flex;
        justify-content: center;
        align-items: center;

        .text {
            color: #FFCA3E;
            padding-left: 10rpx;
            width: 80rpx;
            line-height: 1em;
            text-align: right;
        }
    }

    .footer {
        padding: 10rpx 0;
        display: flex;
        align-items: center;

        button {
            border-radius: 50rpx;
            background: linear-gradient(to right, #FF8C00, #FFA500);
            color: white;
            border: none;
        }
    }
}

// 目录弹出层
.popuInfos {
    background: #ffffff;
    padding: 30rpx;
    border-radius: 30rpx 30rpx 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;

    .he {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .mu {
            font-size: 18px;
            font-weight: 600;
        }

        padding-bottom: 20rpx;
    }

    .pages {
        color: blue;
        margin: 0 20rpx;
    }

    .unPage {
        padding: 20rpx;
        display: flex;
        flex-direction: column;
    }

    .chapter-item {
        display: flex;
        margin: 10rpx 0;
        padding: 10rpx;
        border-bottom: 1px solid #eee;

        &:last-child {
            border-bottom: none;
        }

        text:first-child {
            font-weight: bold;
            margin-right: 10rpx;
        }
    }
}

// 分享弹出层
.shareInfo {
    background: #fff;
    padding: 30rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;

    .shares {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 20rpx;

        text {
            font-size: 16px;
            font-weight: 600;
        }
    }

    .show-list {
        display: inline-flex;
        padding: 0 20rpx;

        .items {
            margin: 0 20rpx;

            image {
                width: 40px;
                height: 40px;
            }

            text {
                margin-left: 4rpx;
            }
        }
    }
}
</style>